@title-height: 28px;

.wrapper {
  position: relative;
  width: 100%;
  height: @title-height;
  background: var(--color-secondary);
  color: var(--rps-text-primary);
  display: flex;
  align-items: center;
  user-select: none;
  &::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: @title-height;
    -webkit-app-region: drag;
  }
  .title-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    img {
      margin: 0 6px;
      margin-top: 1px;
      width: 20px;
    }
  }
  .btn-wrapper {
    -webkit-app-region: no-drag;
    z-index: 9999;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    .btn {
      width: 45px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      & > svg {
        width: 16px;
      }
      &:hover {
        background-color: var(--color-bg-5);
      }
      &.danger:hover {
        background-color: rgb(var(--red-5));
      }
    }
  }
}

:global {
  .global-app-wrapper.global-title-bar {
    .global-content-wrapper {
      height: calc(100vh - @title-height) !important;
    }
  }
}
